<template>
    <view class="task-box">
        <view class="top-title flex-start-center" @click="OpenTask">
            <view class="title flex_1">我的任务</view>
            <text class="iconfont icon-jiantouxiangyou" style="font-size: 10px;color: #888888" ></text>
        </view>
        <view class="top-tips flex-start-center">
            <view class="top-tips-item">
                <text class="iconfont icon-jinji"></text>
                <text>紧急</text>
                <text class="number">1</text>
            </view>
            <view class="top-tips-item">
                <text class="iconfont icon-jijiangguoqi"></text>
                <text>即将过期</text>
                <text class="number">2</text>
            </view>
            <view class="top-tips-item">
                <text class="iconfont icon-yiguoqi"></text>
                <text>已过期</text>
                <text class="number">3</text>
            </view>
        </view>
        
        <view class="content">
            <view class="top">
                <view class="card card-top-left">
                    <view class="card-item-label">待执行</view>
                    <view class="card-item-content font_24 black-font">60</view>
                    <image src="@/static/img/homeImgs/home_quest_dzx.png" mode="scaleToFill" class="image"/>
                </view>
                <view class="card card-top-right">
                    <view class="card-item-label">执行中</view>
                    <view class="card-item-content card-item-content_right">11</view>
                    <image src="@/static/img/homeImgs/home_quest_ywc.png" mode="scaleToFill" class="image"/>
                </view>
            </view>
            <view class="bottom">

                <view class="card card-bottom-left">
                    <view class="card-item-label">待审查</view>
                    <view class="card-item-content">22</view>
                    <image src="@/static/img/homeImgs/home_quest_dsc.png" mode="scaleToFill" class="image"/>
                </view>
                <view class="card card-bottom-content">
                    <view class="card-item-label">已完成</view>
                    <view class="card-item-content">2</view>
                    <image src="@/static/img/homeImgs/home_quest_ywc.png" mode="scaleToFill" class="image"/>
                </view>
                <view class="card card-bottom-right">
                    <view class="card-item-label">全部</view>
                    <view class="card-item-content">111</view>
                    <image src="@/static/img/homeImgs/home_quest_qb.png" mode="scaleToFill" class="image"/>
                </view>
            </view>
        </view>
    </view>
</template>
  
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import service from '@/common/service';
import dayjs from 'dayjs';
import dateRangUtil from '@/common/dateRangUtil';
import { useLoginStore } from '@/store/modules/useLoginStore';
import { useMainStore } from '../../../store/modules/store';
const mainStore = useMainStore();
const { loginInfo } = mainStore;
const LoginStore = useLoginStore();

/**
   *  Hometask 任务
 */


const OpenTask = () => {
    console.log('点击了');
}

const getData = ()  => {
  
    // service.enjoyShowLoading('正在查询...');
    // let request = {
	// 	url: LoginStore.EnjoyOA,
	// 	data: {
	// 		UniqueKey: "管易通40审批",
	// 		MethodName: "QueryUnApproveBillTypeInfoList",
    //         ObjectData: {
    //             IsNotPage: false,
    //             PageSize: 10,
    //             CurrentPage: 1,
    //             Tag: {
    //                 Search: "",
    //                 Type: "",
    //                 StartDt: dateRangUtil.getLast1Month()[0],
    //                 EndDt: dateRangUtil.getLast1Month()[2],
    //                 SendUser: "",
    //                 UserNo: loginInfo.sUser,
    //             },
    //         },
	// 	},
	// };
    // dataList.value = [];
    // service.request(request, (res: any) => {
    //     if (res && res.data && !res.data.HasException) {
    //         const objectData = res.data.ObjectData;
    //         if (objectData && objectData.ReturnObject && objectData.ReturnObject.length > 0) {
    //             const currentYear = dayjs().year();
    //              dataList.value = objectData.ReturnObject.map((n: dataObj)=> {
    //                 const date = dayjs(n.c_rec_dt);
    //                 const dateYear = date.year();
    //                 n.c_rec_dt = dateYear === currentYear ? dayjs(n.c_rec_dt).format('MM-DD HH:mm') : date.format('YYYY-MM-DD HH:mm')
    //                 return n
    //             });
    //         } else {
    //             service.enjoyShowToast(res.data.Exception && res.data.Exception.Message || '')
    //         }

    //     } else {
    //         service.enjoyShowToast(res.data.Exception && res.data.Exception.Message || '')
    //     }
    //     service.enjoyHideLoading();
    // }, () => {
    //     service.enjoyHideLoading();
    //     console.log('失败')
    // });
}

/* 展开收起 */ 
 onMounted(() => {
    getData();
});


</script>
  
<style lang="scss" scoped>
.task-box {
  padding: 28rpx;
  width: 100%;
  box-sizing: border-box;
  font-family: PingFangSC, PingFang SC;
  background-color: #fff;
  border-radius: 20rpx;
}
.top-title {
    height: 45rpx;
    margin-bottom: 30rpx;
    .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: #000000;
    }
}
.top-tips {
    margin-bottom: 16rpx;
    padding: 0 16rpx;
    width: 100%;
    height: 48rpx;
    background: linear-gradient(90deg, rgba(255, 126, 0, 0.05) 0%, rgba(255, 126, 0, 0) 100%);
    border-radius: 10rpx;
    font-size: 24rpx;
    .top-tips-item {
        margin-right: 40rpx;
        font-family: PingFangSC, PingFang SC;
        &:first-child {
            color: #FF4000; // 设置第一个.item的背景颜色
        }
        &:nth-child(2) {
            color: #FF7E00; // 设置第二个.item的背景颜色
        }
        &:last-child {
            color: #017EFF; // 设置第三个.item的背景颜色
        }
        text {
            margin-right: 8rpx;
        }
        .number {
            font-family: PingFangSC, PingFang SC;
            font-size: 32rpx;
            font-weight: 500;
        }
    }
    .iconfont {
        font-size: 24rpx;
    }
   
}
.content {
    display: flex;
    flex-direction: column;
    .top {
        display: flex;
        height: 150rpx;
        margin-bottom: 16rpx;
        box-sizing: border-box;
    }
    .bottom {
        display: flex;
        height: 120rpx;
        .card {
            width: 207rpx;
        }
        .card-item-label {
            margin-bottom: 14rpx;
        }
        .card-item-content {
            height: 38rpx;
            font-size: 32rpx;
            font-weight: 500;
            font-size: 32rpx;
            color: #000000;
            line-height: 38rpx;
        }
        .card-bottom-content {
            margin: 0 16rpx;
            box-sizing: border-box;
        }
    }
    .card {
        position: relative;
        height: 100%;
        padding: 20rpx 0 0 16rpx;
        background: #F9F9F8;
        border-radius: 10rpx;
        box-sizing: border-box;
    }
    .image {
        position: absolute;
        width: 80rpx;
        height: 80rpx;
        right: 0;
        bottom: 0;
    }
    .card-item-label {
        margin-bottom: 12rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #888888;
    }
    .card-item-content {
        height: 57rpx;
        line-height: 57rpx;
        font-weight: 500;
        font-size: 48rpx;
        color: #000000;
        font-family: '黑体', sans-serif;
    }
    .font_24 {
        font-size: 48rpx;
    }
    .card-item-content_right {
        font-family: Roboto, Roboto;
        font-weight: 500;
        font-size: 32rpx;
        color: #000000;
        line-height: 38rpx;
    }
    .black-font {
        font-family: '黑体', sans-serif;
    }
    .card-top-left {
        width: 431rpx;
        margin-right: 16rpx;
    }
    .card-top-right {
        width: 207rpx;
    }
}



</style>